<div id="user-center">
	<el-tabs v-model="activeName" :stretch="true" :tab-position="tabPosition" type="border-card" @tab-click="handleClick">
		<el-tab-pane label="用户信息" name="user-info">
			<span id="user-info">
				<el-col :sm="5">
					<el-card class="user-info left-card">
						<el-avatar :size="300" :src="src" fit="fill"></el-avatar>
						<div style="padding: 14px;">
							<span>{{user.userName}}</span>
						</div>
					</el-card>
				</el-col>
				<el-col :sm="19">
					<form-editor ref="formEditor" :colWidth="20" :formItems="formItems" :formParams="formParams" action="update" class="right-card"></form-editor>
				</el-col>
			</span>
		</el-tab-pane>
		<el-tab-pane label="信息修改" name="update-info">
			<span id="update-info">
				<el-col :sm="5">
					<el-card class="update-info left-card">
						<el-upload :action="upLoadUrl" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :show-file-list="false"
							class="avatar-uploader"
							drag>
							<el-avatar v-if="imageUrl" :size="300" :src="imageUrl" class="avatar" fit="fill"></el-avatar>
							<i v-else class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或
								<el-button size="mini" type="primary">点击上传</el-button>
							</div>
							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
						</el-upload>
						<div style="padding: 14px;">
							<span>{{user.userName}}</span>
						</div>
					</el-card>
				</el-col>
				<el-col :sm="19">
					<form-editor ref="formEditor" :colWidth="20" :formItems="formItems" :formParams="formParams" action="update" class="right-card"
						@handle-save="handleSave"></form-editor>
				</el-col>
			</span>
		</el-tab-pane>
		<el-tab-pane label="更新密码" name="update-pwd">
			<span id="update-pwd">
				<el-card class="card-body">
					<el-form ref="updateForm" :model="updateUser" :rules="pwdRules">
						<el-row>
							<el-form-item label="用户名" prop="userName">
								<el-col :sm="20">
									<el-input v-model="updateUser.userName" auto-complete="on" disabled prefix-icon="el-icon-s-custom"
										size="medium"></el-input>
								</el-col>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="手机号" prop="phone">
								<el-col :sm="15">
									<el-input v-model="updateUser.telephone" :autofocus="true" auto-complete="on" prefix-icon="el-icon-s-custom" size="medium"></el-input>
								</el-col>
								<el-col :sm="5">
									<el-button size="small" style="width: 100%" type="primary" @click="getVerifyCode()">获取验证码</el-button>
								</el-col>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="验证码" prop="verifyCode">
								<el-col :sm="20">
									<el-input v-model="updateUser.verifyCode" auto-complete="on" clearable prefix-icon="el-icon-lock" show-password
										size="medium"></el-input>
								</el-col>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="新密码" prop="newPassword">
								<el-col :sm="20">
									<el-input v-model="updateUser.newPassword" auto-complete="on" clearable prefix-icon="el-icon-unlock" show-password
										size="medium"></el-input>
								</el-col>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="确认密码" prop="rePassword">
								<el-col :sm="20">
									<el-input v-model="updateUser.rePassword" auto-complete="on" clearable prefix-icon="el-icon-unlock" show-password
										size="medium"></el-input>
								</el-col>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item>
								<el-col :sm="18">
									<el-button class="update-button" style="width: 100%" type="primary" @click="updatePwd()">修改密码</el-button>
								</el-col>
							</el-form-item>
						</el-row>
					</el-form>
				</el-card>
			</span>
		</el-tab-pane>
	</el-tabs>
</div>
